import React, { useState, memo, useEffect } from "react";
import { Table, Tag, Button, Space, Dialog, Card } from "tdesign-react";
import { DeleteIcon, BrowseIcon } from "tdesign-icons-react";
import style from "./index.module.less";
import PubSub from 'pubsub-js';
interface Message {
  id: number;
  title: string;
  content: string;
  time: string;
  isRead: boolean;
}

interface DialogProps {
  visible: boolean;
  message: Message | null;
  onClose: () => void;
}

const MessageDialog: React.FC<DialogProps> = ({
  visible,
  message,
  onClose,
}) => {
  if (!message) return null;
  return (
    <Dialog
      header={message.title}
      visible={visible}
      onClose={onClose}
      width={600}
      footer={false}
    >
      <Card>
        <div className={style.messageDetail}>
          <Space>
            <div className={style.messageTime}>{message.time}</div>
            <div className={style.messageStatus}>
              <Tag
                theme={!message.isRead ? "danger" : "success"}
                variant="light"
              >
                {message.isRead ? "已读" : "未读"}
              </Tag>
            </div>
          </Space>
          <div className={style.messageContent}>{message.content}</div>
        </div>
      </Card>
    </Dialog>
  );
};

const notification: React.FC = () => {
  // pubsub 接受预约消息
  useEffect(() => {
    PubSub.subscribe('reservation', (msg: any, data: any) => {
      console.log("收到预约消息", msg, data);
    });
  }, []);
  const [selectedMessage, setSelectedMessage] = useState<Message | null>(null);
  const [messages, setMessages] = useState<Message[]>([
    {
      id: 1,
      title: "系统通知",
      content: "您的账户已成功创建",
      time: "2024-01-10 10:00",
      isRead: false,
    },
    {
      id: 2,
      title: "待办提醒",
      content: "您有一个新的待办任务需要处理",
      time: "2024-01-09 14:30",
      isRead: true,
    },
    {
      id: 3,
      title: "系统更新",
      content: "系统将在今晚进行例行维护",
      time: "2024-01-08 16:45",
      isRead: false,
    },
  ]);

  const columns = [
    {
      title: "状态",
      colKey: "isRead",
      width: 100,
      cell: ({ row }: { row: Message }) => (
        <Tag theme={!row.isRead ? "danger" : "success"} variant="light">
          {row.isRead ? "已读" : "未读"}
        </Tag>
      ),
    },
    { title: "标题", colKey: "title", width: 180 },
    { title: "内容", colKey: "content", width: 400 },
    { title: "时间", colKey: "time", width: 160 },
    {
      title: "操作",
      colKey: "operation",
      width: 300,
      cell: ({ row }: { row: Message }) => (
        <Space>
          <Button
            theme="primary"
            variant="text"
            onClick={() => {
              markAsRead(row.id)
              setSelectedMessage(row)
            }}
            icon={<BrowseIcon />}
          >
            查看详情
          </Button>
          <Button
            theme="danger"
            variant="text"
            onClick={() => deleteMessage(row.id)}
            icon={<DeleteIcon />}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  const markAsRead = (id: number) => {
    setMessages(
      messages.map((msg) => (msg.id === id ? { ...msg, isRead: true } : msg))
    );
  };

  const deleteMessage = (id: number) => {
    setMessages(messages.filter((msg) => msg.id !== id));
  };

  const unreadCount = messages.filter((msg) => !msg.isRead).length;

  return (
    <div style={{ padding: "20px" }}>
      <div style={{ marginBottom: "16px" }}>
        <Space style={{ alignItems: "center" }}>
          {(
            <Button
              theme="primary"
              variant="base"
              disabled={unreadCount === 0}
              onClick={() => messages.forEach((msg) => markAsRead(msg.id))}
            >
              全部已读
            </Button>
          )}
        </Space>
      </div>
      <Table
        data={messages}
        columns={columns}
        rowKey="id"
        hover
        pagination={{
          total: messages.length,
          pageSize: 10,
          showJumper: true,
        }}
      />
      <MessageDialog
        visible={!!selectedMessage}
        message={selectedMessage}
        onClose={() => {
          setSelectedMessage(null);
        }}
      />
    </div>
  );
};

export default memo(notification);
